<template>
  <div class="project-adder">
    <el-dialog title="创建新项目" :visible.sync="isShow">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="项目名称" prop="name">
          <el-input ref="name" clearable v-model="form.name" @keyup.native.enter="handleBtnConfirmClick"/>
        </el-form-item>
        <el-form-item label="执行命令的完整路径" prop="exec_command">
          <el-input clearable v-model="form.exec_command"/>
        </el-form-item>
        <el-form-item label="基准测试所在的工作目录" prop="workdir">
          <el-input clearable v-model="form.workdir"/>
        </el-form-item>
      </el-form>
      <slot name="footer">
        <div class="controls-group">
          <el-button-group style="width: 100%; display: flex; margin-top: 80px;">
            <el-button type="success" style="flex: 1;" @click="handleBtnConfirmClick">确认</el-button>
            <el-button type="danger" style="flex: 1;" @click="isShow = false">取消</el-button>
          </el-button-group>
        </div>
      </slot>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ProjectAdder",

  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      isShow: false,
      form: {
        name: '',
        exec_command: './cmake-build-debug/lns',
        workdir: '/home/gengwenhao/all_projects/mapf-lns2/'
      },
      rules: {
        name: [
          {required: true, message: '项目名称必须填写', trigger: 'blur'}
        ]
      }
    }
  },

  watch: {
    isShow(val) {
      this.$emit('update:visible', val)
    },
    visible(val) {
      this.isShow = !!val
      if (val) {
        this.form = {...this.$options.data().form}
        this.$nextTick(() => {
          this.$refs['name'].focus()
        })
      }
    }
  },

  methods: {
    handleBtnConfirmClick() {
      this.$refs['form'].validate(isValid => {
        if (isValid) {
          this.$emit('confirm', this.form)
        } else {
          this.$message.warning('请检查填写内容')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
